import React, { useState, useEffect } from 'react';
import QueueAnim from 'rc-queue-anim';
import classnames from 'classnames';
import _ from 'lodash';
import CesiumMap from './components/CesiumMap';

import Menu from './components/Menu';
import Tree from './components/Tree';
import EnvironToggle from './components/EnvironToggle';
import { handleChangeCesiumContainerToolPosition } from './utils';

import styles from './index.less';

const GisContent: React.FC<{ route: any; location: any; pathname: string }> = (props) => {
  console.log(props);
  const { children, pathname } = props;

  const isBlank = pathname && pathname.includes('/blank');

  const [specialVisible, handleChangeSpecialVisible] = useState(false);
  const [leftVisible, setLeftVisible] = useState(true);

  const [treeCollapsed, setTreeCollapsed] = useState(false);

  useEffect(() => {
    document.body.style.overflow = 'hidden';

    handleChangeCesiumContainerToolPosition(specialVisible);
  }, [specialVisible]);

  const handleQueueAnimEnd = ({ key, type }: { key: string | number | undefined; type: string }) => {
    console.log({ key, type });
    document.body.style.overflow = '';
    setLeftVisible(type === 'leave');
  };

  return (
    <React.Fragment>
      <CesiumMap />

      {/* 菜单 */}
      <Menu {...props} />

      {/* 项目/模型树 */}
      <Tree isBlank={isBlank} collapsed={treeCollapsed} change={setTreeCollapsed} />

      {/* 图例 */}

      {/* 工具 */}

      {/* 专题图 */}
      {/* <EnvironToggle visible={specialVisible} onchange={handleChangeSpecialVisible} /> */}

      <QueueAnim
        type={['right', 'right']}
        animConfig={{
          opacity: [1, 0],
          translateX: [0, 340],
        }}
        ease="easeInOutQuart"
        onEnd={handleQueueAnimEnd}
        interval={0}
        style={{ height: '100%' }}
      >
        {specialVisible ? (
          <div key="a" style={{ height: '100%' }} className={styles.queue}>
            <img
              src={`/images/gis/environ-right.png`}
              onClick={() => handleChangeSpecialVisible(!specialVisible)}
              className={classnames(styles.environ, styles.in)}
            />
            <div className={styles.content}>{children}</div>
          </div>
        ) : null}
      </QueueAnim>

      {leftVisible ? (
        <img
          key="c"
          src={`/images/gis/environ-left.png`}
          onClick={() => {
            handleChangeSpecialVisible(true);
            setLeftVisible(false);
          }}
          className={classnames(styles.environ)}
        />
      ) : null}
    </React.Fragment>
  );
};

export default GisContent;
